<template>
  <div class="container">
    <!--  顶部用户信息 start-->
    <div class="header">
      <div class="user-info">
        <van-image
			style="margin-top: 0.625rem;margin-left: 0.625rem;"
          round
          width="5rem"
          height="5rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <div class="user-desc" style="margin-left: 0.625rem;">
          <span class="user-nickname">账号：0001</span>
          <span class="user-username">昵称：测试用户</span>
        </div>
        <van-icon @click="onSet" class="user-set" size="large" name="setting-o"/>
      </div>
    </div>
    <!--  顶部用户信息 end-->
    <!--  我的协议 start-->
    <div class="order">
      <span>我的协议</span>
      <van-grid class="order-grid" :border="false" column-num="3">
        <van-grid-item v-for="(item,index) in agreementGrids" :key="index" :icon="item.icon" :text="item.text":to="item.to"></van-grid-item>
      </van-grid>
    </div>
    <!--  我的协议 end-->
	<!--  我的订单 start-->
	<div class="order">
	  <span>我的订单</span>
	  <van-grid class="order-grid" :border="false" column-num="5">
	    <van-grid-item v-for="(item,index) in orderGrids" :key="index" :icon="item.icon" :text="item.text":to="item.to"></van-grid-item>
	  </van-grid>
	</div>
	<!--  我的订单 end-->
	<!--  我的客户 start-->
	<div class="order">
	  <span>我的客户</span>
	  <van-grid class="order-grid" :border="false" column-num="5">
	    <van-grid-item v-for="(item,index) in crmGrids" :key="index" :icon="item.icon" :text="item.text":to="item.to"></van-grid-item>
	  </van-grid>
	</div>
	<!--  我的客户 end-->
  </div>
</template>
 
<script setup>
import {onMounted, reactive, ref} from "vue";

import {useRouter} from 'vue-router'
 
const router = useRouter()
//用户信息
const userInfo = ref(0)
//订单宫格数据
const agreementGrids = reactive([
  {
    icon: 'credit-pay',
	text: '代理协议',
    to: '',
  },  {
    icon: 'peer-pay',
	text: '配送协议',
    to: '',
  },  {
    icon: 'other-pay',
	text: '商销协议',
    to: '',
  },

])

const orderGrids = reactive([
	{
		icon: 'cart-o',
		text: '已下单',
		to: '',
	},
	{
		icon: 'underway-o',
		text: '审批中',
		to: '',
	},
	{
		icon: 'todo-list-o',
		text: '待支付',
		to: '',
	},{
		icon: 'todo-list-o',
		text: '待支付',
		to: '',
	},{
		icon: 'todo-list-o',
		text: '待支付',
		to: '',
	}
])

onMounted(() => {

})
/**
 * 用户设置按钮
 */
const onSet = () => {
  router.push("/user/setting")
}
/**
 * 用户全部订单
 */
const onOrdersList = () => {
  router.push("/user/orders")
}
</script>
 
<style scoped>
.header {
  background-image: linear-gradient(135deg, #fdf0e7 10%, #fce3ba 100%) !important;;
  height: 200px;
  border-radius: 0 0 15px 15px;
}
 
/**
个人信息模块
 */
.user-info {
  display: flex;
}
 
.user-nickname {
  display: block;
  font-weight: bolder;
  font-size: 30px;
  margin-top: 20px;
  margin-left: 10px;
  color: #170f07;
}
 
.user-username {
  display: block;
  font-size: 25px;
  margin-left: 10px;
  margin-top: 5px;
  color: #70635a;
}
 
.user-set {
  margin-left: 40%;
  margin-top: 20px;
}
 
/**
订单模块
 */
.order {
  border-radius: 15px;
  margin: 20px;
  background-color: #ffffff;
  padding: 20px;
}
 
.order span {
  font-size: 30px;
  font-weight: bolder;
  color: #170f07;
}
 
.order-button {
  float: right;
}
</style>